<template>
	<view class="area" :style="{ paddingTop: height + 'px' }">
		<view class="title" :style="{ height: height + 'px', lineHeight: height + 'px' }">
			腾讯课堂
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const height = ref(0);
	// 获取系统信息
	uni.getSystemInfo({
		success: info => {
			// 动态设置 安全区 高度
			height.value = info.statusBarHeight
		}
	})
</script>

<script>
	export default {
		name: "safe-area",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
.area {
	position: sticky;
	top: 0;
	background-color: white;
	z-index:99;
	.title {
		font-weight: bold;
		font-size: 40rpx;
		margin-left: 20rpx;
	}
}
</style>